<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>产品中心</title>
    <link href="css/base.css" type="text/css" rel="stylesheet" />
    <link href="css/contactUs.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
    <script src="./js/jquery.js"></script>
    <script src="./js/ajax.js"></script>
    <link rel="stylesheet" href="css/addProduct.css">
</head>


<body>
    <!--顶部-->
    <div class="banner">
        <!--头部-->
        <div class="top">
            <div class="logo"></div>
            <span></span>
            <div class="txt01">
                <p>专注护肤行业<b>10年</b></p>
                <p>我们只生产最高品质的护肤产品</p>
            </div>
            <div class="tel">
                <p>服务咨询热线</p>
                <b>400-888-2837</b>
            </div>
        </div>
        <!--导航-->
        <div class="nav">
            <div class="nav_bg">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><span></span><a href="product.html?series=0">产品中心</a></li>
                    <li><span></span><a href="brandIdea.html">理念</a></li>
                    <li><span></span><a href="addProduct.html">添加产品</a></li>
                    <li><span></span><a href="search.html">搜索</a></li>
                </ul>
                <div class="search">
                    <button class="s01" id="searchProduct"style="background-color: #077c2b; border: none; color: #fff; 
                    padding: 5px 10px; font-size: 14px; font-weight: bold;
                    box-shadow: 0 2px 4px rgba(0,0,0,.2);">点击搜索</button>
                    <input type="text" placeholder="请输入关键字" class="s02" id="searchContent"/><span></span>
                    <button id="login" onClick="logout()" style="background-color: #077c2b; border: none; color: #fff; 
                    padding: 5px 10px; font-size: 14px; font-weight: bold;
                    box-shadow: 0 2px 4px rgba(0,0,0,.2);">
                        退出账号
                    </button>
                    <button id="loginUser"
                        style="cursor: default; background-color: #077c2b; border: none; color: white; height: 25px;"><a
                            href="login.html" style="color: white;">未登录</a></button>
                </div>
            </div>
        </div>
        <i></i>
    </div>


    <div class="main">


        <div class="box02">
            <div class="message">
                <span>添加产品</span>
                产品名称：<input type="text" id="productName" />
                产品简介:<input type="text" id="introduction" />
                产品分类:<select id="productSeries" class="selectProduct">
                    <option value="0">请选择分类</option>
                    <option value="1">分类1</option>
                    <option value="2">分类2</option>
                    <option value="3">分类3</option>
                </select>
                产品详情:<input type="text" id="message" />
                产品图片:<input type="file" id="fileInput" />
                <!-- <input type="file" id="fileInput"> -->


                <button class="button" onclick="addImg()">添加产品</button>
            </div>
        </div>

    </div>


    <!--底部-->
    <div class="bottom">
        <div class="bb">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><span></span><a href="product.html?series=0">产品中心</a></li>
                <li><span></span><a href="brandIdea.html">理念</a></li>
                <li><span></span><a href="addProduct.html">添加产品</a></li>
                <li><span></span><a href="search.html">搜索</a></li>
            </ul>
        </div>
        <p>© 珺柚 </p>
    </div>
</body>
<script src="js/js.js"></script>
<script src="js/map.js"></script>
<script src="./js/userIsLogin.js"></script>
<script>
    //页面进入就运行
    var role = 0;
    $(document).ready(function () {
        getAllProductSeries();
        //获取用户角色
        role = sessionStorage.getItem("role");
    });
    //获取所有产品分类
    function getAllProductSeries() {
        ajax.get("/getAllProductSeries", (data) => {

            var htmlData = `<option value="0">请选择产品分类</option>`;
            for (var i = 0; i < data.data.length; i++) {
                var seriesName = data.data[i].seriesProduct;
                htmlData += `<option value="${seriesName}">${seriesName}</option>`;
            }
            $("#productSeries").html(htmlData);


        });
    }
    //添加图片
    function addImg() {
        if (role != 1) {
            alert("您不是管理员哦！")
            return
        }
        //获取到相应图片input
        var fileInput = document.getElementById('fileInput');
        var file = fileInput.files[0]; // 获取用户选择的文件

        if (!file) {
            console.log("未选择文件");
            return;
        }
        //设置上传表单数据
        var formData = new FormData();
        formData.append('avatar', file);

        // 使用 AJAX 提交文件数据
        $.ajax({
            url: 'http://localhost:3001/profile',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function (res) {

                //上传成功传入图片名字然后进行数据添加
                addProduct(res.filePath);
            }
        });

    }
    //添加产品
    function addProduct(imgurl) {
        //判断只有管理员可以添加
        if (role != 1) {
            alert("您不是管理员哦！")
            return
        }
        //拿到输入框的数据
        let productName = $("#productName").val();
        let introduction = $("#introduction").val();
        let productSeries = $("#productSeries").val();
        let message = $("#message").val();
        if (productName == "") {
            alert("产品名称不能为空");
            return
        }
        //把他转成json
        const jsonData =
        {
            productName: productName,
            introduction: introduction,
            productSeries: productSeries,
            message: message,
            imgSrc: imgurl
        };

        ajax.post("/addProduct", jsonData, (data) => {

            var result = data.data;
            if (result.affectedRows != 1) {
                alert("添加失败!");
                //跳出这个函数
                return
            } else {
                $("#productName").val("");
                $("#introduction").val("");
                $("#productSeries").val("");
                $("#message").val("");
                alert("添加成功");
                //添加成功后语句的id
                var insertId = data.data.insertId;

            }

        });
    }
    //注册成功以后也添加销量表数据--暂不使用（改为数据库触发器）
    /*
    *DELIMITER $$
    *CREATE TRIGGER add_sales_record AFTER INSERT ON product 
    *    FOR EACH ROW BEGIN
    *    INSERT INTO sales (productId, salesVolume) 
    *    VALUES (NEW.id, 0);
    *   END$$
    *DELIMITER ;
    */
    function addSales(productId) {
        //添加产品后添加销量默认为0
        ajax.get("/addSales?productId=" + productId, (data) => {

        });
    }
</script>

</html>